<template>
	<view class="root" :style="{backgroundImage:'url('+img+')'}">
		<view :class="[show ? 'up' : '','shake-up']">
			<image mode="aspectFit" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shakeup.png"></image>
		</view>
		<view :class="[show ? 'down' : '','shake-down']">
			<image mode="aspectFit" src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shakedown.png"></image>
		</view>
		<!-- 弹出层 -->
		<view class="uni-banner" style="background:#FFFFFF;" v-if="bannerShow">
			<view style="justify-content:flex-end;" @tap="closeBanner">
				<view style="justify-content:flex-end; text-align:right; padding:20upx;">
					<text class="uni-icon uni-icon-close"></text>
				</view>
			</view>
			<view>
				<image :src="poseImage" style="width:100%;" mode="widthFix"></image>
			</view>
		</view>
		<view class="uni-mask" v-if="bannerShow"></view>
		<!-- 弹出层 -->
	</view>
</template>
<script>
	import {
		getUrl
	} from '@/common/oss';
	export default {
		data() {
			return {
				img: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/1.jpg',
				show: false,
				bannerShow: false,
				poseImage: ""
			}
		},
		onLoad: function () {
			let music = uni.createInnerAudioContext();
			music.src = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/shake.wav';

			let index = 1,
				t = null;
			uni.onAccelerometerChange((res) => {
				if (Math.abs(res.x) + Math.abs(res.y) + Math.abs(res.z) > 20 && !this.show) {
					music.play();
					setTimeout(() => {
						index++;
						if (index > 4) {
							index = 1
						}
						this.img = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/shake/' + index + '.jpg';
										plus.screen.lockOrientation('portrait-primary');
					
						
					}, 2000);
					this.show = true;
					if (t) {
						clearTimeout(t);
					}
					t = setTimeout(() => {
						t = null;
						this.show = false;
					}, 600)
				}
			})
		},
		onUnload() {
			this.show = false;
			uni.stopAccelerometer();
		},
		methods: {
			closeBanner() {
				this.bannerShow = false;
			},
			showBanner() {
				var index69 = Math.round(Math.random()*15+1);
				this.poseImage = getUrl("schealth/69/schealth69"+(index69 > 10? index69+"":"0"+index69 )+".png");
				this.bannerShow = true;
			}
			
		}
	}
</script>

<style>
	.root {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.shake-up,
	.shake-down {
		height: 50%;
		overflow: hidden;
		transition: all .5s ease-in-out;
		-webkit-transition: all .5s ease-in-out;
		background: #333;
	}

	.up {
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}

	.down {
		transform: translateY(50%);
		-webkit-transform: translateY(50%);
	}

	image {
		height: 100%;
		width: 100%;
	}
	
	 /* 遮罩层 */
	    .uni-mask {
	        background: rgba(0, 0, 0, 0.6);
	        position: fixed;
	        width: 100%;
	        height: 100%;
	        left: 0;
	        top: 0;
	        z-index: 1;
	    }
	
	    /* 弹出层形式的广告 */
	    .uni-banner {
	        width: 70%;
	        position: fixed;
	        left: 50%;
	        top: 50%;
	        background: #FFF;
	        border-radius: 10upx;
	        z-index: 99;
	        transform: translate(-50%, -50%);
	    }
</style>
